<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Global.css Run Sheet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-au" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link type="text/css" rel="stylesheet" href="themes/default/css/screen.css" media="screen, projection" />
<link href='http://fonts.googleapis.com/css?family=Philosopher&subset=latin' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Override Structure */
BODY {background:#DDD none;}
#position-global-css {width:800px; margin:0px auto;}
#page-global-css {padding:2em 2em; margin:5em 0px; background:#EEE; -moz-border-radius: 25px; -webkit-border-radius: 25px; border: 4px solid #666; -webkit-box-shadow: 0 0 50px rgba(50, 50, 50, 0.8); -moz-box-shadow: 0 0 50px rgba(50, 50, 50, 0.8); box-shadow: 0 0 50px rgba(50, 50, 50, 0.5);  }
.heading-global-css {font-family: 'Philosopher', arial, serif; margin:2em 0em 2em 0em; padding:0.3em 0px; font-size:2em; text-transform:uppercase; color:#DDD; border-top:2px dotted #333; border-bottom:1px dotted #333; text-align:center; letter-spacing:0.3em; text-shadow:1px 1px 0 black, 2px 2px 0 #476871}
.heading-one-global-css {font-family: 'Philosopher', arial, serif; font-size:5em; text-shadow:2px 2px 0 #999}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">
(function($){
	$(function(){
		$('body').addClass('js');
		$('.textsize').click(function(e){			
			$('body').attr("class","js").addClass(this.hash.replace("#",""));
		});
	});
})(jQuery);
</script>

</head>
<body>
<div id="jumplinks">
	<p>Welcome, skip to the <a href="#content" title="Skip to content">content</a>.</p>
</div>
<div id="position-global-css">
	<div id="page-global-css">
	
			<div id="content-global-css">
	
				<h1 class="heading-one-global-css">Global.css Test Sheet </h1>
				
				<p>
					<span class="js-warning">JavaScript is required to be enabled to change the font size.</span>
					<a href="#" class="textsize">Normal</a>
					<a href="#text-large" class="textsize">Large</a> 
					<a href="#text-bigger" class="textsize">Bigger</a>
					<a href="#text-biggest" class="textsize">Biggest</a>				
				<p>
				

			    <h5 class="heading-global-css">LET'S START WITH A SELECTION OF ELEMENTS</h5>

				<div class="article-global-css">
					<h2>Headings are good</h2>
					<h3>They seperate copy and stuff</h3>
					<p>The <em>P</em> element represents a paragraph. It cannot contain block-level elements (including P itself).</p>
					<blockquote cite="http://w3c.org/" title="Article title, author, date">
					   I’m citing the W3C here.</blockquote>
					<p>We <strong>discourage</strong> authors from using empty <em>P</em>  elements.<br />User agents should ignore empty P elements.</p>
					<ul class="citric-fruit">
					    <li>Lemons</li>
					    <li>Oranges</li>
					</ul>
				        <table summary="This is the summary text for this table."  border="0" cellspacing="0" cellpadding="0">
				          <caption>A test table with a thead, tfoot, and tbody elements</caption>
				          <thead>
				            <tr>
				              <th>Table Header One</th>
				              <th>Table Header Two</th>
				              <th>Table Header Three</th>
				            </tr>
				          </thead>
				          <tbody>
				            <tr>
				              <td>TD One</td>
				              <td>TD Two</td>
					          <td>TD Three</td>
				            </tr>
				            <tr>
				              <td>TD One</td>
				              <td>TD Two</td>
					          <td>TD Three</td>
				            </tr>
				            <tr>
				              <td>TD One</td>
				              <td>TD Two</td>
					          <td>TD Three</td>
				            </tr>
				            <tr>
				              <td>TD One</td>
				              <td>TD Two</td>
					          <td>TD Three</td>
				            </tr>
				          </tbody>
				          <tfoot>
				            <tr>
				              <td colspan="3">tfoot footer</td>
				            </tr>
				          </tfoot>
				        </table>
				        <p>We <strong>discourage</strong> authors from using empty <em>P</em>  elements.<br />User agents should ignore empty P elements.</p>
				        
				</div>


				
				
				

				
       <h5 class="heading-global-css">PARAGRAPHS <span class="alt">&amp;</span> BLOCKQUOTES</h5>
      
      
      <div class="article-global-css">
        <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <sub>sub text</sub> ut labore et <sup>sup text</sup> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <blockquote>
          "<strong>Straight Text Node</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        </blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         <blockquote>
          <p>"<strong>Nested &lt;p&gt;</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
          <ul>
	          <li><strong>Nested &lt;ul&gt; list test</strong></li>
	          <li>Another list element. <em>Lorem ipsum dolor sit amet</em>, consectetur adipisicing elit<sup>2</sup>.</li>
          </ul>
          <p>"<strong>Nested &lt;p&gt;</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
        </blockquote>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></p>
        <p>Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>

      <h5 class="heading-global-css">LISTS</h5>

      <div class="article-global-css">
        <ul>
          <li>Unordered list test</li>
          <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          <li>Yet another element in the list</li>
          <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        </ul>
        <ol>
          <li>Ordered list test</li>
          <li>Another list element</li>
          <li>Yet another element in the list</li>
        </ol>
      </div>

      <div class="article-global-css">
        <ol>
          <li>Ordered list</li>
          <li>Here's a nested unordered list
          <ul>
            <li>Nested Unordered list</li>
            <li>Nested ordered list
            <ol>
              <li>The first</li>
              <li>And the second</li>
            </ol>
            </li>
          </ul>
          </li>
          <li>Ordered List item</li>
          <li>Nested Ordered list
          <ol>
            <li>Some point</li>
            <li>Nested Unordered list
            <ul>
              <li>The first</li>
              <li>And the second</li>
            </ul>
            </li>
          </ol>
          </li>
        </ol>
      </div>
      
      <div class="article-global-css">
      					<h3>Unordered</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ante orci, pharetra vitae cursus consectetur, venenatis nec tellus. Proin ornare lorem non urna mattis feugiat. In dictum egestas luctus. Fusce a faucibus sem. Fusce fermentum sapien nec nisi euismod dapibus id nec libero. Ut elit eros, tempus in interdum vel, laoreet et sapien. Aenean eros ipsum, sodales non adipiscing sit amet, suscipit at lorem. Integer interdum interdum luctus. Cras posuere congue porta. Sed nec mauris tellus. Maecenas pretium lorem non justo semper mollis. Vestibulum bibendum nisi eget urna semper ac ullamcorper metus rutrum. Sed lacus mauris, adipiscing eu placerat eget, laoreet non mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque rutrum quam sed tortor adipiscing molestie. Vestibulum tristique malesuada nisl, non commodo nibh dictum non.</li>
						<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum elementum id, bibendum et orci. Cras eu sem vitae ligula pellentesque blandit. Maecenas hendrerit, sem in luctus molestie, urna felis porttitor ante, sed feugiat sapien risus eget justo. Aliquam pharetra suscipit pulvinar. Sed odio felis, ullamcorper non lobortis ac, molestie vitae tellus. Donec in tortor diam. Sed mattis bibendum quam quis lobortis. Proin pellentesque dolor eu nisi aliquet et interdum felis rutrum. Duis aliquam vestibulum nulla sed aliquet. Quisque sodales egestas est, sed vulputate urna imperdiet eget. Praesent arcu nunc, mollis malesuada varius non, placerat id turpis. </li>
						<li>Mauris molestie neque ut sem lacinia egestas.</li>
					</ul>
					<h3>Ordered</h3>
					<ol>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Mauris molestie neque ut sem lacinia egestas.</li>
					</ol>
					<h3>Combination</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Mauris molestie neque ut sem lacinia egestas.</li>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
					</ul>
					<ul>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
						<li>Mauris molestie neque ut sem lacinia egestas.
							<ol>
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
								<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
								<li>Mauris molestie neque ut sem lacinia egestas.
									<ul>
										<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
										<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
										<li>Mauris molestie neque ut sem lacinia egestas.</li>
									</ul>									
								</li>
							</ol>							
						</li>
						<li>Cras vestibulum felis ac augue tincidunt id laoreet turpis mattis.</li>
						<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
						<li>Curabitur at nulla odio, vitae iaculis elit.</li>
					</ul>
					<ol>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
						<li>Mauris molestie neque ut sem lacinia egestas.
							<ul>
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
								<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
								<li>Mauris molestie neque ut sem lacinia egestas.
									<ol>
										<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
										<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
										<li>Mauris molestie neque ut sem lacinia egestas.</li>
									</ol>									
								</li>
							</ul>							
						</li>
						<li>Cras vestibulum felis ac augue tincidunt id laoreet turpis mattis.</li>
						<li>Nunc congue hendrerit neque sit amet iaculis. Aenean rutrum iaculis purus et porta. Proin leo eros, pulvinar fermentum</li>
						<li>Curabitur at nulla odio, vitae iaculis elit.</li>
					</ol>
      
      </div>

      <h5 class="heading-global-css">DEFINITION LIST</h5>

      <div class="article-global-css">
        <dl>
          <dt>Lorem ipsum dolor sit amet</dt>
          <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit</dd>
          <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
          <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit</dd>
          <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit</dt>
          <dd>Lorem ipsum dolor sit amet</dd>
        </dl>
      </div>

      <h5 class="heading-global-css">HEADINGS</h5>

      <div class="article-global-css">
        <h1>H1: Lorem ipsum dolor sit amet</h1>
        <h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2>
        <h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
        <h4>H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis</h4>
        <h5>H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h5>
        <h6>H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h6>
		
      <h5 class="heading-global-css">HEADINGS AND COPY</h5>

        <h1>Heading 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h3>Heading 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h4>Heading 4</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h5>Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h6>Heading 6</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <h5 class="heading-global-css">MISC INLINE ELEMENTS</h5>

      <div class="article-global-css">
        <p>
          <strong>&lt;strong&gt;</strong> 
          <del>&lt;del&gt; deleted</del> 
          <dfn>&lt;dfn&gt; dfn</dfn> 
          <em>&lt;em&gt; emphasis</em> 
          <sub>sub text</sub>
          <sup>sup text</sup>
        </p>
        <p>
          <a>&lt;a&gt; anchor</a><br>
          <a href="http://www.google.com">&lt;a&gt; a + href</a>
        </p>
        <p>
          <abbr title="extended abbr text should show when mouse over">&lt;abbr&gt; abbr - extended text when mouseover.</abbr><br>
          <acronym title="extended acronym text should show when mouse over">&lt;acronym&gt; acronym - extended text when mouseover.</acronym>
        </p>
        <address>
          &lt;address&gt;<br />
          Donald Duck<br />
          Box 555<br />
          Disneyland
        </address>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.</p>

      
      <h5 class="heading-global-css">FORMS</h5>
      
      <form action="#">
      	<fieldset>
      		<legend>My Form</legend>
      		<div>
      			<label for="text1">Sugar:</label>
      			<input type="checkbox" value="Candy" name="text1" id="text1" />
      		</div>
      		<div>
      			<label for="text1">Sugar:</label>
      			<input type="radio" value="Candy" name="text1" id="text1" />
      		</div>
      		<div>
      			<label for="text1">Sugar:</label>
      			<input type="text" value="Candy" name="text1" id="text1" />
      		</div>
      		<div>
      			<label for="text2">Sugar:</label>
      			<textarea value="Candy" name="text2" id="text2"></textarea>
      		</div>
      		<div>
      			<label for="text3">Sugar:</label>
      			<select class="text" name="text3" id="text3">
      				<option value="1">1</option>
      			</select>
      		</div>
      		
      		
      	</fieldset>
      </form>
        
      
      <h5 class="heading-global-css">TABLES</h5>


        <table summary="This is the summary text for this table."  border="0" cellspacing="0" cellpadding="0">
          <caption>A standard test table with a caption, tr, td elements</caption>
          <tr>
            <th>Table Header One</th>
            <th>Table Header Two</th>
            <th>Table Header Three</th>
          </tr>
          <tr>
            <td>TD One</td>
            <td>TD Two</td>
            <td>TD Three</td>
          </tr>
          <tr>
            <td>TD One</td>
            <td>TD Two</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
          </tr>
          <tr>
            <td colspan="3">TD colspan 2</td>
          </tr>
        </table>

        <table summary="This is the summary text for this table."  border="0" cellspacing="0" cellpadding="0">
          <caption>A test table with a thead, tfoot, and tbody elements</caption>
          <thead>
            <tr>
              <th>Table Header One</th>
              <th>Table Header Two</th>
              <th>Table Header Three</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>TD One</td>
              <td>TD Two</td>
	          <td>TD Three</td>
            </tr>
            <tr>
              <td>TD One</td>
              <td>TD Two</td>
	          <td>TD Three</td>
            </tr>
            <tr>
              <td>TD One</td>
              <td>TD Two</td>
	          <td>TD Three</td>
            </tr>
            <tr>
              <td>TD One</td>
              <td>TD Two</td>
	          <td>TD Three</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">tfoot footer</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <div class="article-global-css">

		
      	<h5 class="heading-global-css">CODE ELEMENTS</h5>

		
<pre><code>&lt;code&gt;
(function($){
	$(function(){
		$('pre').hide();
	});
})(jQuery);</code></pre>

       


      </div>

		      <h5 class="heading-global-css">WYSIWYG CONTENT </h5>
				<div class="article-global-css">
					<h1>Happy New Year!</h1>
					<img alt="" src="http://a.cksource.com/c/1/inc/img/fireworks.png" width="200" height="150" style="float:right; padding-left:10px;" />
					<p>
						The CKSource team wishes a <strong>wonderful and happy New Year</strong> to everybody around the globe!</p>
					<p style="text-align: center;">
						The year 2009 has been extremely important for all of us here. We&#39;ve brought to light the brand new CKEditor, which quickly became a success, with totally positive feedback from our customers and community.</p>
					<ul>
						<li>
							We have strong plans for 2010. We&#39;ll be working to make our products even better, by enhancing on features, stability and performance, as well as creating services that will make our project unique. <strong>Stay in touch!</strong></li>
					</ul>
					<img alt="" src="http://a.cksource.com/c/1/inc/img/fireworks.png" width="150" height="120" style="float:left; padding-right:10px;" />
					<p style="padding-right:50px;">
						The CKSource team wishes a <strong>wonderful and happy New Year</strong> to everybody around the globe!</p>
					<p style="text-align: center; padding:10px;">
						The year 2009 has been extremely important for all of us here. We&#39;ve brought to light the brand new CKEditor, which quickly became a success, with totally positive feedback from our customers and community.</p>
					<ul>
						<li>
							We have strong plans for 2010. We&#39;ll be working to make our products even better, by enhancing on features, stability and performance, as well as creating services that will make our project unique. <strong>Stay in touch!</strong></li>
					</ul>
										
				</div>

    </div>


	
		

	
	</div>
</div>
</body>
</html>